<template>
	<view class="p-5">
		<navigator url="/uni_modules/uniapper-music-admin/pages/songlist/add">
			<t-btn color="primary" size="xs">新增</t-btn>
		</navigator>
		<unicloud-db ref="songlist" v-slot:default="{data,pagination,loading, error, options}" page-data="replace"
			:page-current="1" :page-size="2" getcount collection="my-music-songlist,my-music" @load="handleLoad"
			field="create_date,description,listName,listPoster,music_array{title,author,music_src}"
			orderby="create_date desc">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				{{pagination}}
				<view class="" v-for="(item,index) in data" :key="index">
					<view class="">{{item.listName}}</view>
					<view class="flex">
						<t-btn color="error" @click="delList(item._id)" size="xs">删除</t-btn>
						<navigator :url="`/uni_modules/uniapper-music-admin/pages/songlist/edit?id=${item._id}`">
							<t-btn color="base" size="xs">编辑</t-btn>
						</navigator>
					</view>
					<t-divider />
				</view>
				<!-- 分页组件 -->
				<uni-pagination show-icon :page-size="pagination.size" :total="pagination.count"
					@change="onpagination" />
			</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		methods: {
			handleLoad(data, ended, pagination) {
				// `data` 当前查询结果
				// `ended` 是否有更多数据
				// `pagination` 分页信息 HBuilderX 3.1.5+ 支持
				console.log(data)
			},
			delList(id) {
				console.log('list')
				this.$refs.songlist.remove(id)
			},
			onpagination(e) {
				this.$refs.songlist.loadData({
					current: e.current
				})
			}
		}

	}
</script>

<style>

</style>
